<template>
	<view class="content">
		<view class="top">
			<view class="go_back" @click="go_back">
				<image src="../../../static/img/back.png" mode=""></image>
			</view>
			<view class="dname">
				诈骗类型
			</view>
		</view>
		<view class="center" >
			<view class="tab_one">
			<view class="tab_one_text" :style="{'height':(fullHeight-80)/2+ 'px'}" :class="{'active':isActive1==item.type}"
				v-for="(item,index) in leixingarr" @click="checked(item)">{{item.name}}</view>
		</view>
		<view class="tab_two" :style="{'height':(fullHeight-80)+ 'px'}">
			<view class="tab_two_text" :class="{'active':isActive2==item.id}"
				v-for="(item,index) in leixingarr[isActive1-1].content" @click="checked2(item)">
				{{item.title}}
			</view>
		</view>
		<view class="tab_three" :style="{'height':(fullHeight-80)+ 'px'}">
			<view class="tab_three_text" v-for="(item,index) in leixingarr[isActive1-1].content"
				v-if="item.id==isActive2">
				<view class="jieshaoimg">
					<image :src="item.jieshaoimg" mode="widthFix"></image>
				</view>
				<view class="jieshao">
					<rich-text :nodes="item.jieshao"></rich-text>
				</view>
				<view class="tixingimg">
					<image src="../../../static/xktx.png" mode="widthFix"></image>
				</view>
				<view class="tixing">
					<rich-text :nodes="item.tixing"></rich-text>
				</view>


			</view>
		</view>
		</view>
		
	</view>


</template>

<script>
	export default {
		data() {
			return {
				fullwidth: '',
				fullHeight: '',
				isActive1: "1",
				isActive2: "1",
				leixingarr: []
			}
		},
		onLoad() {
			
				uni.setTabBarStyle({
						backgroundImage: '/static/tabbg.png',
						backgroundRepeat: 'norepeat'
					})
			var that = this
			var data = require("static/data/leixing.json")
			that.leixingarr = data["leixingarr"]

		},
		mounted() {
			this.getFullData();
		},
		methods: {
			go_back(){
				uni.navigateBack({
					
				})
			},
			getFullData() {
				var that = this
				uni.getSystemInfo({
					success: function(res) {
						//获取屏幕的高度
						that.fullHeight = res.windowHeight;
						//获取屏幕的宽度
						that.fullwidth = res.windowWidth;
					}
				})
			},
			checked(item) {
				this.isActive1 = item.type;
				console.log(item)
				console.log("isAct=" + this.isActive1)
				this.isActive2 = 1;
			},
			checked2(item) {
				this.isActive2 = item.id;
				console.log(item)
			}



		},


	}
</script>

<style>
	page {
		background-image: url(../../../static/img/backbg.jpg);
	}

	.content {
		/* border: #007AFF solid 1px; */
		/* width: 95%; */
		margin: 0 auto;
		/* display: flex; */
		/* flex-direction: row; */
	}
	.top{
			/* border: #ACC3D4 solid 1px; */
		width: 750rpx;
		height: 50px;
		display: flex;
		flex-direction: row;
		background-color:#CCE5ED ;
	}
	.go_back{
		/* border: #ACC3D4 solid 1px; */
		width:25px;
		height: 25px;
		margin: 13px;
		
	}
	.go_back image{
		width: 100%;
		height: 100%;
	}
	.dname{
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		padding-right: 100rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bolder;
		
		/* border: red solid 1px; */
	}
	
	
	
	
	.center{
		/* border: #007AFF solid 1px; */
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}
	.tab_one {
		/* border: #000000 solid 1px; */
		overflow: hidden;
		width: 80rpx;
		background-color: rgba(229, 238, 245, 0.5);
		color: #000428;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.tab_one_text {
		height: ;
		/* border: #000000 solid 1px; */
		writing-mode: vertical-lr;
		text-align: center;
		width: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.active {
		background-color: rgba(188, 202, 217, 0.5);
	}

	.tab_two {
		/* border: #000000 solid 1px; */
		width: 200rpx;
		overflow-x: hidden;
		box-sizing: border-box;
		padding: 0rpx 10rpx;
		background-color: #f1f6fa;
	}

	.tab_two_text {
		width: 100%;
		/* height: 75px; */
		font-size: 35rpx;
		border-radius: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
		text-align: center;
		margin-bottom: 20rpx;
		color: #000428;
		/* background-color: #e7eef5; */
	}

	.tab_three {

		border-radius: 20rpx;
		width: 500rpx;
		background-color: #ffffff;
		overflow-x: hidden;
		/* box-sizing: border-box; */
	}

	.tab_three_text {

		/* box-sizing: border-box; */
	}

	.jieshaoimg {
		/* border: #000000 solid 1px; */
		width: 100%;
		/* height: 300rpx; */
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}

	.jieshaoimg image {
		border-radius: 20rpx;
		width: 100%;
		/* height: 100%; */
	}

	.jieshao {
		/* border: #000000 solid 1px; */
		background-color: #F7F7F7;
		border-radius: 20rpx;
		margin: 10rpx auto;
		box-sizing: border-box;
		width: 95%;

		display: block;
		text-indent: 2em;
	}

	.tixingimg {
		width: 200rpx;
		margin: 0rpx auto;
	}

	.tixingimg image {
		width: 100%;
	}

	.tixing {

		/* border: #000000 solid 1px; */
		background-color: #F7F7F7;
		border-radius: 20rpx;
		margin: 10rpx auto;
		box-sizing: border-box;
		width: 95%;
		display: block;
		text-indent: 2em;
		color: #ea0003;

	}
</style>
